<template>
  <div>
    <!-- 热门榜一 -->
    <el-card>
      <el-card class="hot">
        <!-- 热门榜标题 -->
        <div slot="header" class="top">
          <span>24小时阅读排行</span>
          <el-button style="float: right; padding: 3px 0" type="text">
            >>更多
          </el-button>
        </div>
        <!-- 文章标题 -->
        <div>
          <el-card class="top_title">
            <div>1.xxxxxxxxxxxx</div>
          </el-card>
          <el-card class="top_title">
            <div>2.xxxxxxxxxxxx</div>
          </el-card>
          <el-card class="top_title">
            <div>3.xxxxxxxxxxxx</div>
          </el-card>
          <el-card class="top_title">
            <div>4.xxxxxxxxxxxx</div>
          </el-card>
          <el-card class="top_title">
            <div>5.xxxxxxxxxxxx</div>
          </el-card>
          <el-card class="top_title">
            <div>6.xxxxxxxxxxxx</div>
          </el-card>
          <el-card class="top_title">
            <div>7.xxxxxxxxxxxx</div>
          </el-card>
          <el-card class="top_title">
            <div>8.xxxxxxxxxxxx</div>
          </el-card>
          <el-card class="top_title">
            <div>9.xxxxxxxxxxxx</div>
          </el-card>
          <el-card class="top_title">
            <div>10.xxxxxxxxxxxx</div>
          </el-card>
        </div>
      </el-card>
    </el-card>

    <!-- 热门榜二 -->
    <el-card>
      <el-card class="hot">
        <!-- 热门榜标题 -->
        <div slot="header" class="top">
          <span>历史阅读排行</span>
          <el-button style="float: right; padding: 3px 0" type="text">
            >>更多
          </el-button>
        </div>
        <!-- 文章标题 -->
        <div>
          <el-card class="top_title">
            <div>1.xxxxxxxxxxxx</div>
          </el-card>
          <el-card class="top_title">
            <div>2.xxxxxxxxxxxx</div>
          </el-card>
          <el-card class="top_title">
            <div>3.xxxxxxxxxxxx</div>
          </el-card>
          <el-card class="top_title">
            <div>4.xxxxxxxxxxxx</div>
          </el-card>
          <el-card class="top_title">
            <div>5.xxxxxxxxxxxx</div>
          </el-card>
          <el-card class="top_title">
            <div>6.xxxxxxxxxxxx</div>
          </el-card>
          <el-card class="top_title">
            <div>7.xxxxxxxxxxxx</div>
          </el-card>
          <el-card class="top_title">
            <div>8.xxxxxxxxxxxx</div>
          </el-card>
          <el-card class="top_title">
            <div>9.xxxxxxxxxxxx</div>
          </el-card>
          <el-card class="top_title">
            <div>10.xxxxxxxxxxxx</div>
          </el-card>
        </div>
      </el-card>
    </el-card>

    <!-- 热门榜三 -->
    <el-card>
      <el-card class="hot">
        <!-- 热门榜标题 -->
        <div slot="header" class="top">
          <span>7天评论排行</span>
          <el-button style="float: right; padding: 3px 0" type="text">
            >>更多
          </el-button>
        </div>
        <!-- 文章标题 -->
        <div>
          <el-card class="top_title">
            <div>1.xxxxxxxxxxxx</div>
          </el-card>
          <el-card class="top_title">
            <div>2.xxxxxxxxxxxx</div>
          </el-card>
          <el-card class="top_title">
            <div>3.xxxxxxxxxxxx</div>
          </el-card>
          <el-card class="top_title">
            <div>4.xxxxxxxxxxxx</div>
          </el-card>
          <el-card class="top_title">
            <div>5.xxxxxxxxxxxx</div>
          </el-card>
          <el-card class="top_title">
            <div>6.xxxxxxxxxxxx</div>
          </el-card>
          <el-card class="top_title">
            <div>7.xxxxxxxxxxxx</div>
          </el-card>
          <el-card class="top_title">
            <div>8.xxxxxxxxxxxx</div>
          </el-card>
          <el-card class="top_title">
            <div>9.xxxxxxxxxxxx</div>
          </el-card>
          <el-card class="top_title">
            <div>10.xxxxxxxxxxxx</div>
          </el-card>
        </div>
      </el-card>
    </el-card>
  </div>
</template>

<style scoped>
.hot {
  height: 635px;
}

.top {
  display: flow-root;
}

.top_title {
  height: 47px;
  display: flex;
  align-items: center;
}

.el-card {
  margin-bottom: 5px;
}
</style>
